<template>
  <el-dialog title="管理动作详情" :visible.sync="show" width="1200px" append-to-body>
    <div class="course-info" style="margin-top: -20px">
      <div class="item">
        <span>所属部门：</span><span>{{ courseRow.showDeptName }}</span>
      </div>
      <div class="item">
        <span>项目：</span><span>{{ courseRow.projectName }}</span>
      </div>
      <div class="item">
        <span>检查人员：</span><span>{{ courseRow.principalUserName || '/' }}</span>
      </div>
      <div class="item">
        <span>检查时间：</span><span>{{ courseRow.checkDate }}</span>
      </div>
      <div class="item">
        <span>检查类型：</span><span>{{ courseRow.progressChkType | dictFilter(dict.type.cq_progress_chk_type) }}</span>
      </div>
    </div>
    <div class="course-info" style="margin-top: 20px">
      <div class="item">
        <span>管理动作得分：</span><span :class="courseRow.gldzLevel | scoreClass">{{ courseRow | scoreName('gldz') }}</span>
      </div>
      <div class="item">
        <span>工序验收得分：</span><span :class="courseRow.gxysScore | scoreClass">{{ courseRow | scoreName('gxys') }}</span>
      </div>
      <div class="item">
        <span>档案管理得分：</span><span :class="courseRow.daglScore | scoreClass">{{ courseRow | scoreName('dagl') }}</span>
      </div>
      <div class="item">
        <span>样板验收得分：</span><span :class="courseRow.ybysScore | scoreClass">{{ courseRow | scoreName('ybys') }}</span>
      </div>
    </div>
    <div v-loading="loading" class="gldz-tree-wrap">
      <el-tree default-expand-all :data="treeData" :props="treeProps">
        <div slot-scope="{ data, node }">
          <div class="gldz-tree-item">
            <span>【{{ data.couseName }}】：</span>
            <span>
              <span :class="{ red: data.itemLevel == '2' || data.itemLevel == '3' }">
                <span v-if="data.itemLevel == 3">*</span>
                <span style="white-space: pre-wrap">{{ data.standardContent }}</span>
                <span v-if="data.score" style="margin-left: 10px">【{{ data.score }}分】</span>
              </span>
              <span v-if="!noResults.some(code => code == data.courseCode)">
                <el-tag size="mini" v-if="data.result == 11 && !ybysCode.some(code => code == data.courseCode)" type="danger" style="margin-left: 10px">【不合格】</el-tag>
                <el-tag size="mini" v-else-if="data.result == -1" type="warning" style="margin-left: 10px">【甩项】</el-tag>
                <el-tag size="mini" v-else-if="data.result == 10 && !ybysCode.some(code => code == data.courseCode)" type="success" style="margin-left: 10px">【合格】</el-tag>
              </span>
              <span v-if="node.isLeaf && data.result !=-1 && data.scoreItemId && data.badTotal" type="text" style="margin-left: 10px;color: #409EFF;" @click="showDetail(data, node)">详情</span>
            </span>
          </div>
          <transition name="el-zoom-in-top">
            <process-detail v-show="node.isLeaf && data.loaded && data.isExpand" v-loading="data.itemLoading" :row-data="data" class="gldz-process-detail" />
          </transition>
        </div>
      </el-tree>
    </div>
  </el-dialog>
</template>
<script>
// 管理动作详情
import { selectGldzItemDetail, selectItemAreaInfo, getScoreItemDetail } from '@/api/projectInspection/courseCheck'
import { GLDZ_YBYSPJ } from '@/utils/baseData'
import processDetail from './processDetail'
import { getFileURL } from '@/api/common'
import constant from '../constant'
export default {
  name: 'GldzDetail',
  components: {processDetail},
  filters: {
    scoreClass(val) {
      if (!val) return ''
      if (val === 'A' || val >= 90) return 'green'
      if (val === 'B' || (val < 90 && val >= 80)) return 'blue'
      if (val === 'C' || val < 80) return 'red'
      return ''
    },
    scoreName(item = {}, key) {
      const level = item[`${key}Level`] || ''
      const score = item[`${key}Score`] || ''
      const val = level ? `${level}${score ? `(${score})` : ''}` : score
      return val || '/'
    },
    statusType(val, type) {
      let str = ''
      let style = ''
      if (val === 'unqualified') {
        str = '不合格'
        style = 'danger'
      } else if (val === 'cannotcheck' || val === 'notcheck') {
        str = '甩项'
        style = 'warning'
      } else if (val === 'qualified') {
        str = '合格'
        style = 'success'
      }
      if (type === 'desc') {
        return str
      } else {
        return style
      }
    }
  },
  dicts: ['cq_progress_chk_type'],
  data() {
    return {
      show: false,
      loading: false,
      courseRow: {},
      treeProps: { children: 'childList', label: 'standardContent' },
      treeData: [],
      noResults: [],
      ybysCode: [],
      isConstruction: false // 是否土建
    }
  },
  created() {
    // 初始化
    this.noResults = [...constant.gldz.ybyspj.reduceScoreCodes, ...constant.gldz.ybyspj.inputScoreCodes]
    const path = this.$route.path
    this.isConstruction = path.includes('ConstructionCourse')
    for (const key in GLDZ_YBYSPJ) {
      this.ybysCode.push(GLDZ_YBYSPJ[key])
    }
  },
  methods: {
    init(row) {
      this.show = true
      this.courseRow = row
      this.getInfo()
    },
    async getInfo() {
      const params = { taskId: this.courseRow.randomId, scoreType: 'gldz' }
      this.loading = true
      const res = await selectGldzItemDetail(params).catch(() => false)
      this.loading = false
      if (res === false) return
      if (res.data.resultList && res.data.resultList.length > 0) {
        recurse(res.data.resultList)
      }
      this.treeData = res.data.resultList
      function recurse(treeList = []) {
        for (let i = 0; i < treeList.length; i++) {
          treeList[i].loaded = false // 是否加载过
          treeList[i].areaList = [] // 违反位置
          treeList[i].itemLoading = false // 加载状态
          treeList[i].isExpand = false // 是否展开
          treeList[i].deductArr = []
          if (treeList[i].childList && treeList[i].childList.length > 0) {
            recurse(treeList[i].childList)
          }
        }
      }
    },
    showDetail(row) {
      row.isExpand = !row.isExpand
      if (row.loaded || row.result === -1 || !row.scoreItemId) return
      row.loaded = true
      const params = {scoreItemId: row.scoreItemId}
      row.itemLoading = true
      this.getScoreItemDetailByScoreItem(row)
      selectItemAreaInfo(params).then(
        response => {
          if (response.code === 200) {
            const dataList = response.data
            if (dataList.length > 0) {
              dataList.map(area => {
                // checked 初始化
                area.url = getFileURL(area.fileId)
                // 注：rectifyId 现用于判断从历史添加，此处暂不需要
                delete area.rectifyId
              })
              row.areaList = dataList
            } else {
              row.areaList = []
            }
          }
        }
      ).finally(() => {
        row.itemLoading = false
      })
    },
    // 根据 标准计分 获取验收情况列表
    getScoreItemDetailByScoreItem(row) {
      const query = {
        scoreItemId: row.scoreItemId
      }
      getScoreItemDetail(query).then(res => {
        if (res.code === 200) {
          if (res.data) {
            row.rectifyRecords = []
            if (res.data.rectifyRecords) {
              res.data.rectifyRecords.forEach(item => {
                if (item.sysFiles) {
                  item.sysFiles.forEach(file => {
                    file.url = getFileURL(file.id)
                    file.isImage = true
                    file.type = 'png'
                  })
                } else {
                  item.sysFiles = []
                }
              })
              row.rectifyRecords = res.data.rectifyRecords.sort((obj1, obj2) => {
                return obj1.updateTime.localeCompare(obj2.updateTime)
              })
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => { // 接口请求错误处理
        console.error(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.course-info {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 10px;
  .item {
    margin: 0 40px 10px 0;
    span:nth-child(1) {
      display: inline-block;
      margin-right: 10px;
    }
    span:nth-child(2) {
      display: inline-block;
      min-width: 80px;
      font-weight: bold;
      background-color: #eff2f9;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      vertical-align: middle;
    }
  }
}
.gldz-process-detail {
  background-color: #f5f9ff;
  padding: 10px 0 10px 30px;
  border-radius: 5px;
  min-width: 900px;
}
.gldz-tree-wrap {
  height: calc(100vh - 300px);
  min-height: 300px;
  overflow-y: auto;
  /deep/ .el-tree-node__content {
    height: auto;
  }
  .gldz-tree-item {
    padding: 6px 0;
    line-height: 26px;
    display: flex;
    span:nth-child(1) {
      white-space: nowrap;
    }
    span:nth-child(2) {
      white-space: pre-wrap;
    }
  }
}
.green {
  color: #67c23a;
}
.blue {
  color: #409eff;
}
.red {
  color: #f56c6c;
}
</style>
